<template>
	<wsPage title="登录日志列表">
		<div slot="page_operate">
			<Button  @click="refreash"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
		<wsSmPanel :page="table.page" @simple-query="query" @page-change="query">
			<div slot="query_form">
				<Form :model="queryForm" :label-width="100" inline>
					<FormItem label="时间区间">
						<Row>
		                <Col span="11">
		                    <FormItem prop="date">
		                        <DatePicker type="datetime" placeholder="查询开始时间" :value="queryForm.searchStartTime" @on-change="changeStartTime"></DatePicker>
		                    </FormItem>
		                </Col>
		                <Col span="2" style="text-align: center">-</Col>
		                <Col span="11">
		                    <FormItem prop="date">
		                        <DatePicker type="datetime" placeholder="查询结束时间" :value="queryForm.searchEndTime" @on-change="changeEndTime"></DatePicker>
		                    </FormItem>
		                </Col>
		            </Row>      
			        </FormItem>
				</Form>
			</div>
			<div slot="list_operate">
				
			</div>
			<div slot="list_data">
				<Table border :columns="table.columns" :data="table.data"></Table>
			</div>
		</wsSmPanel>
		

	</wsPage>
</template>

<script>
	import Util from '../../../common/util.js';
	export default {
		data() {
			return {
				queryForm: {
					searchStartTime: '',
					searchEndTime:''
				},
				table: {
					columns: [{
						title: '登录名',
                        key: 'loginName',
                        align: 'center'
					},{
						title: 'IP',
                        key: 'clientIp',
                        align: 'center'
					},{
						title: '登录时间',
                        key: 'createDate',
                        align: 'center'
					},{
						title: '省份',
                        key: 'province',
                        align: 'center'
					},{
						title: '城市',
                        key: 'city',
                        align: 'center'
					}],
					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					}
				}
			}
		},
		computed: {	
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.query();
			},
			/**
			 * 刷新
			 */
			refreash() {
				this.queryForm = {
					searchStartTime: '',
					searchEndTime:''
				};
				this.table.page = {
					total: 0, //总条数
					pageNum: 1, //当前页
					pageSize: 10 //每页显示条数
				};
				this.init();
			},
			/**
			 * 表单查询
			 */
			query() {
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				const _this = this;
				this.axios.get('/ws/sys/loginLog/' + pageSize + '/' + pageNum, {params:this.queryForm}).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.buildPageData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_) {
				this.table.data = data_.list;
				this.table.page.total = data_.total;
			},
			changeStartTime(date_) {
				this.queryForm.searchStartTime = date_;
			},
			changeEndTime(date_) {
				this.queryForm.searchEndTime = date_;
			}
		}
	}
</script>

<style scoped>
	.ws-form-select {
		width: 162px;
	}
</style>